<template>
  <div>
    <Modal
      title="加入班级"
      v-model="joinModal"
      :closable="false"
      :width="400"
      :mask-closable="false">
      <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2">
        <FormItem :label-width="20">
          <RadioGroup v-model="formValidate2.type">
            <Radio label="select">选择学校班级</Radio>
            <Radio label="input">通过班级编号加入</Radio>
          </RadioGroup>
        </FormItem>
        <div v-if="formValidate2.type == 'select'">
          <FormItem label="选择学段" prop="section" :label-width="90">
            <Select v-model="formValidate2.section" size="large" placeholder="请选择学段">
              <Option v-for="item in sectionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="选择年级" prop="grade" :label-width="90">
            <Select :disabled="!gradeList.length" v-model="formValidate2.grade" size="large" placeholder="请选择年级">
              <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="选择班级" prop="classes" :label-width="90">
            <Select :disabled="!classesList.length" v-model="formValidate2.classes" size="large" placeholder="请选择班级">
              <Option v-for="item in classesList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </div>
        <div v-if="formValidate2.type == 'input'">
          <FormItem label="班级编号" prop="num" :label-width="90">
            <Input size="large" v-model="formValidate2.num" placeholder="请填写班级编号" />
          </FormItem>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleReset('formValidate2')" v-if="!btnLoading">取消</Button>
        <Button type="success" :loading="btnLoading" @click="handleSubmit('formValidate2')" icon="ios-paperplane">加入</Button>
      </div>
    </Modal>



    <Modal
      title="创建班级"
      v-model="addModal"
      :closable="false"
      :width="400"
      :mask-closable="false">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
        <FormItem label="选择学段" prop="section">
          <Select v-model="formValidate.section" style="width: 200px" size="large" placeholder="请选择学段">
            <Option v-for="item in sectionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="入学年度" prop="year">
          <DatePicker size="large" v-model="formValidate.year" style="width: 200px" type="year" placeholder="请选择入学年度"></DatePicker>
        </FormItem>
        <FormItem label="班级名称" prop="name">
          <Input size="large" v-model="formValidate.name" placeholder="请填写班级名称">
          <span slot="append">班</span>
          </Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="handleReset('formValidate')" v-if="!btnLoading">取消</Button>
        <Button type="success" :loading="btnLoading" @click="handleSubmit('formValidate')" icon="ios-paperplane">创建</Button>
      </div>
    </Modal>
    <Card style="width:100%" class="has-btn-card right-btn-card" dis-hover>
      <p slot="title">
        <span>班级列表</span>
        <span class="card-left-action active">我的班级</span>
        <span class="card-left-action">全校班级</span>
      </p>
      <div slot="extra">
        <Button type="text" icon="plus" @click="joinModal = true">加入班级</Button>
        <Button type="text" icon="plus" @click="addModal = true">创建班级</Button>
      </div>

      <Table
        :columns="columns1"
        :data="data1"></Table>
      <div class="page-component">
        <Page :total="100"></Page>
      </div>
    </Card>
  </div>
</template>
<script>
  export default {
    computed: {
      joinType() {
        return this.formValidate2.type
      }
    },
    watch: {
      joinType: function (val) {
        this.$refs['formValidate2'].resetFields()
        if (val === 'select') {
          this.ruleValidate2 = {
            section: [{required: true, message: '请选择学段'}],
            grade: [{required: true, message: '请选择年级'}],
            classes: [{required: true, message: '请选择班级'}]
          }
        } else if (val === 'input') {
          this.ruleValidate2 = {
            num: [{required: true, message: '请填写班级编号'}]
          }
        }
      }
    },
    data () {
      return {
        joinModal: false,
        addModal: false,
        btnLoading: false,
        sectionList: [{
          value: '1',
          label: '小学'
        }, {
          value: '2',
          label: '初中'
        }],
        gradeList: [],
        classesList: [],
        formValidate2: {
          type: 'select',
          section: '',
          year: '',
          name: '',
          num: ''
        },
        ruleValidate2: {
          section: [{required: true, message: '请选择学段'}],
          grade: [{required: true, message: '请选择年级'}],
          classes: [{required: true, message: '请选择班级'}]
        },
        formValidate: {
          section: '',
          year: '',
          name: ''
        },
        ruleValidate: {
          section: [{required: true, message: '请选择学段', trigger: 'change'}],
          year: [{required: true, message: '请选择入学年度', trigger: 'blur'}],
          name: [{required: true, message: '请填写班级名称', trigger: 'blur'}]
        },
        columns1: [
          {
            title: '班级名称',
            key: 'name',
            width: 300,
            render: (h, params) => {
              return h('a', {
                on: {
                  click: () => {
                    this.$router.push({path: '/classesInfo'})
                  }
                }
              }, params.row.name)
            }
          },
          {
            title: '班级编号',
            key: 'age',
            width: 200,
          },
          {
            title: '教师(人)',
            align: 'center',
            key: 'created'
          },
          {
            title: '学生(人)',
            align: 'center',
            key: 'endAd'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '删除后无法恢复哦！',
                    placement: 'bottom-end'
                  },
                  on: {
                    'on-ok': () => {
                      console.log(params)
                    }
                  }
                }, [
                  h('Button', {
                    props: {type: 'text'}
                  }, '删除')
                ])
              ])
            }
          }
        ],
        data1: [{
            name: '葛二蛋',
            age: 'NH1288328',
            created: '3',
            endAd: '20'
        }, {
          name: '葛三蛋',
          age: 'JS1828383',
          created: '2',
          endAd: '29'
        }]
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.btnLoading  = true
            this.$Message.success('Success!');
          }
        })
      },
      handleReset (name) {
        this.joinModal = false
        this.addModal = false
        this.btnLoading  = false
        this.$refs[name].resetFields()
      }
    }
  }
</script>
